<template>
	<view class="formBox">
		<uni-forms ref="valiForm" :rules="rules" v-model="formData" label-position="top" label-width="150">
			<uni-forms-item label="物品名称" required name="goodsName">
				<uni-easyinput v-model="formData.goodsName" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="规格型号" required name="specificationModel">
				<uni-easyinput v-model="formData.specificationModel" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="单位" required name="unit">
				<uni-easyinput v-model="formData.unit" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="描述" name="described">
				<uni-easyinput v-model="formData.described" placeholder="请输入" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" type="primary" @click="onSubmit('valiForm')">提交</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 表单数据
			formData: {},
			// 规则
			rules: {
				goodsName: {
					rules: [{
						required: true,
						errorMessage: '请输入内容'
					}]
				},
				unit: {
					rules: [{
						required: true,
						errorMessage: '请输入内容'
					}]
				},
				specificationModel: {
					rules: [{
						required: true,
						errorMessage: '请输入内容'
					}]
				},
			},
		}
	},
    watch: {
        'formData.date': {
            handler(newVal) {
                
            },
            immediate: false,
            deep: true
        },
    },
	methods: {
		// 提交
		onSubmit(ref) {
			this.$refs[ref].validate().then(res => {
				console.log('success', res);
				this.$emit('callback', res);
			}).catch(err => {
				console.log('err', err);
			})
		},
        // 跳转页面
        onLocation(url) {
            uni.navigateTo({
                url
            });
        },
	},
}
</script>

<style lang="scss" scoped>
.formBox {
	padding: 60rpx 48rpx 100rpx;
	border-radius: 40rpx 40rpx 0 0;
	background: #fff;
	overflow: hidden;
}
</style>
